<script setup lang="ts">

import {ElCol, ElRow} from "element-plus";
</script>

<template>
  <el-row class="app-info" gutter="24">

    <router-link :to="{name:'home'}">
    <el-col :span="6"><el-icon><House /></el-icon></el-col>
    </router-link>

    <router-link :to="{name:'CinemaView'}">
    <el-col :span="6"><el-icon><VideoCamera /></el-icon></el-col>
    </router-link>

    <router-link :to="{name:'performance-show'}">
    <el-col :span="6"><el-icon><Mic /></el-icon></el-col>
    </router-link>

    <router-link :to="{name:'UserView'}">
    <el-col :span="6"><el-icon><UserFilled /></el-icon></el-col>
    </router-link>

  </el-row>
</template>

<style scoped>

.app-info {
  position: fixed;
  bottom: 0;
  width: 104%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  background-color: #f5f5f5;
}
</style>